<template>
  <div class="create_team">
    <cell-header :title="`创建团队`" :type="1" style="padding-bottom: 24px" />
    <el-card shadow="never" style="min-height: calc(100vh - 165px);">
      <!-- <cell-header :title="`请先创建你的团队，开启高效投放之路`" /> -->
      <p class="title_header webfont-Medium">请先创建你的团队，开启高效投放之路</p>
      <el-form ref="teamForm" label-position="top" :model="teamForm" class="form" :rules="rules" @submit.native.prevent>
        <el-form-item label="名称">
          <span slot="label" style="display: flex;">
            结算币种
            <el-tooltip class="item" effect="dark" content="团队结算币种，创建后将无法更改。默认选择人民币。" placement="right">
              <span><i slot="reference" class="iconfont icon-question-circle icon_img" /></span>
            </el-tooltip>
          </span>
          <div class="currency-list flex ">
            <div
              v-for="item in currencyList"
              :key="item.currency"
              :class="item.currency=== unit ?'currency-item flex pointer active':'currency-item flex pointer'"
              @click="handleChagneCurrency(item.currency)"
            >
              <i class="el-icon-success item-icon"></i>
              <div class="item-img">
                <img :src="item.img">
              </div>
              <div class="item-main">
                <p class="item-title webfont-Medium">{{ item.title }}
                </p>
                <p class="item-info">{{ item.sec }}</p>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="团队名称" prop="teamName">
          <el-input v-model="teamForm.teamName" size="small" maxlength="20" show-word-limit style="width:386px;" placeholder="请输入团队名称" @keyup.enter.native="createIsTeam('teamForm')"></el-input>
        </el-form-item>
        <el-button type="success" size="medium" :disabled="show" @click="createIsTeam('teamForm')" style="top:-15px;">创建团队</el-button>
      </el-form>
      <img :src="require('@/assets/images/icon/team_back.png')" class="img_icon_back">
    </el-card>
    <!-- 创建团队提示 -->
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="400px"
      :before-close="handleClose"
      :append-to-body="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <p class="tip_icon">
        <!-- <i class="el-icon-success"></i> -->
        <img :src="require('@/assets/images/icon/success.svg')">
      </p>
      <p class="tip_text">创建成功</p>
      <p class="tip_text_create">创建团队成功，点击确定按钮即将跳转至数据概览<br>页面。</p>
      <div class="sure_div"><el-button type="success" @click="toOverview">确 定</el-button></div>
    </el-dialog>

  </div>
</template>

<script>
import cellHeader from '@/components/cell-header.vue'
import {
  getDefultPath
} from '@/utils/index.js'
import {
  resetRouter
} from '@/router'
import {
  createTeam,
  getTeamList
} from '@/api/team.js'
export default {
  name: 'CreateTeam',
  components: {
    cellHeader
  },
  data() {
    const teamNameVia = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('团队名称不能为空'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        teamName: [{
          validator: teamNameVia,
          trigger: 'blur'
        }]
      },
      unit: 'RMB',
      show: false,
      dialogVisible: false,
      teamForm: {
        teamName: ''
      },
      currencyList: [{
        title: '人民币',
        img: require('@/assets/images/create/rmb.png'),
        currency: 'RMB',
        sec: '可以投放包含「中国大陆」在内的61个国家或地区，需预付6%的税点'
      },
      {
        title: '美元',
        img: require('@/assets/images/create/usd.png'),
        currency: 'USD',
        sec: '可以投放除「中国大陆」外的60个国家或地区，无需预付税点'
      }]
    }
  },
  computed: {
    scrennHeight() {
      return window.screen.height
    }
  },
  mounted() {
  },
  methods: {
    handleChagneCurrency(data) {
      this.unit = data
    },
    // 创建成功跳转
    async toOverview() {
      const result = await getTeamList()
      if (result.data.code === 20000) {
        const teamData = result.data.data
        const i = teamData.length - 1
        this.$store.commit('team/SET_TEAMID', teamData[i].teamId)
        window.localStorage.setItem('team-data', teamData[i].teamId)
        this.$store.commit('team/SET_TEAMNAME', teamData[i].teamName)
        this.$store.commit('team/SET_TEAMDATA', teamData[i])
        this.$store.commit('user/SET_UNIT', teamData[i].currencyType)
        const userInfo = this.$store.state.user.userInfo
        userInfo.roleName = teamData[i].roleName
        this.$store.commit('user/SET_USER_INFO', userInfo)
        // console.log('重置路由之类的')
        this.$store.commit('user/SET_ROLES', [])
        const path = getDefultPath(teamData[i].roleName)
        this.$store.dispatch('permission/generateRoutes', teamData[i].roleName).then((res) => {
          this.$store.commit('user/SET_ROLES', res)
          resetRouter()
          this.$router.addRoutes(res) // 动态添加可访问路由表
          this.$router.push({
            path,
            query: {
              newTime: new Date().getTime()
            }
          })
          this.$forceUpdate()
        })
      } else {
        this.$message.error(res.data.message)
      }
    },
    // 创建团队
    createIsTeam(form) {
      this.$refs[form].validate(async(valid) => {
        if (valid) {
          if (!this.$store.state.user.userInfo.mobile) {
            this.$message.closeAll()
            this.$message.error('请前往个人中心绑定手机号')
          } else {
            this.show = true
            const data = {
              teamName: this.teamForm.teamName,
              currencyType: this.unit
            }
            const res = await createTeam(data)
            if (res.data.code === 20000) {
              this.show = false
              // this.$message.success("创建团队成功");
              this.dialogVisible = true
            } else {
              this.show = false
              this.$message.error(res.data.message || '创建团队失败')
            }
            this.formTeam.name = ''
            this.teamForm.teamName = ''
          }
        } else {
          this.$message.error(res.data.message || '创建团队失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
 @import "~@/styles/variables.scss";
 div /deep/.el-form--label-top .el-form-item__label {
  line-height: 0px;
}
 .title_header {
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 24px;
  margin-top: 35px;
   margin-bottom: 35px;
 }
  div /deep/.el-button {
    width: 104px;
    height: 36px;
    border-radius: 2px;
    font-size: 14px;
    margin-top: 10px;
  }
 .img_icon_back {
  max-width: calc(100% - 55%);
  max-height: calc(100% - 40%);
  position: absolute;
  bottom: 0;
  right: 40px;
 }
div /deep/.el-dialog__header {
    border-bottom: 0px solid #EEEEEE !important;
    padding: 0 !important;
    text-align: center !important;
}
.tip_icon {
  text-align: center;
  color: #52C41A;;
  font-size: 28px;
  margin-top: 20px;
}
.tip_text {
  font-family: PingFang SC !important;
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  color: #39444E;
  margin-top: 10px;
}
.tip_text_create {
  font-family: PingFang SC !important;
  font-size:14px;
  line-height: 24px;
  text-align: center;
  color: #39444E;
  margin-top: 10px;
}
.sure_div {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 20px;
  .el-button {
    width: 320px;
    text-align: center;
  }
}
.form{
  margin-top: 30px;
}
.el-input {
  width: 20%;
  margin-top: 8px;
}
.icon_img{
  position:absolute;
  width: 12px;
  height: 12px;
  color:#c6c6c6;
  margin-left: 5px;
}
.currency-list {
  justify-content: flex-start;
  margin-top: 12px;
  .currency-item {
    width: 386px;
    position: relative;
    justify-content: flex-start;
    padding: 16px 12px;
    background: #FFFFFF;
    border: 1px solid $borderColor1;
    box-sizing: border-box;
    border-radius: 2px;

      &.active {
            border: 1px solid $mainColor1;
            background-color: #FFFFFF;

            .item-icon {

              display: block;
            }
          }

    &:first-of-type {
      margin-right: 24px;
    }

    .item-icon {
      position: absolute;
      top: 12px;
      right: 12px;
      display: none;
      color: $mainColor1;
      font-size: 20px;
    }

    .item-img {
      margin-right: 16px;
      height: 80px;
      width: 80px;
      padding-top: 16px;
      text-align: center;

      background:  rgba(51, 64, 74, 0.04);
      border-radius: 4px;

      img {
        width: 80%;
        height: auto;
      }
    }

    .item-main {
      margin-bottom: -12px;
    }

    .item-title {
      font-size: 14px;
      line-height: 14px;
      color: #000000;
    }

    .item-info {
      padding-top: 12px;
      width: 217px;
      font-size: 12px;
      line-height: 22px;
      text-align: justify;
      color: $assistTextColor5;
    }
  }
 }
</style>
